<template>
	<div class="login">
		<div class="top">
			<h1>登录</h1>
			<h4>欢迎使用我们的购物平台~~~~</h4>
		</div>
		<van-form @submit="onSubmit">
			<van-cell-group inset class="username">
				<van-field
					v-model="username"
					name="用户"
					label="用户"
					placeholder="请输入用户电话号码"
					left-icon="contact"
					:rules="[{ required: true, message: '请填写正确的用户电话号码' }]"
				/>
			</van-cell-group>
			<van-cell-group inset class="password">
				<van-field
					v-model="password"
					type="password"
					name="密码"
					label="密码"
					left-icon="bag-o"
					right-icon="eye-o"
					placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写正确的密码' }]"
				>
					<template #left-icon>
						<van-icon class-prefix="icon" name="mima" />
					</template>
				</van-field>
			</van-cell-group>
			<p class="forgetpwd">
				<router-link to="/forgetPWD">
					<span>忘记密码？</span>
				</router-link>
			</p>
			<div style="margin: 16px">
				<van-button
					round
					block
					type="primary"
					native-type="submit"
					class="submitBtn"
				>
					登录
				</van-button>
				<p class="register">
					还没有账号<router-link to="/register">去创建？</router-link>
				</p>
			</div>
		</van-form>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { login } from "@/api/register.js";
import { showSuccessToast, showFailToast } from "vant";
// 定义响应式数据，通过v-mode1实现双向数据绑定
const username = ref("");
const password = ref("");
const router = useRouter();
const route = useRoute();
if (route.query.data) {
	const account = JSON.parse(route.query.data);
	username.value = account.phone;
	password.value = account.password;
}

// 定义onSubmit事件函数，给表单绑定提交事件，点击登录按钮时触发onSubmit事件
async function onSubmit() {
	await login(username.value, password.value)
		.then((res) => {
			showSuccessToast(res.data.msg);
			window.localStorage.setItem("token", res.data.token);
			window.localStorage.setItem("username", res.data.username);
			if (res.data.token !== undefined) {
				router.push({
					path: "/home",
				});
			}
		})
		.catch((err) => {
			console.log(err);
		});
}
</script>

<style lang="less" scoped>
body {
	height: 100%;
	.login {
		height: 100%;
		width: 100%;
		background-image: url("../assets/images/LoginBG.jpeg");
		background-size: cover;
		overflow: hidden;
		.top {
			padding-left: 5.333vw;
			margin-top: 13.333vw;
			line-height: 10.667vw;
			margin-bottom: 26.667vw;
			h1 {
				color: white;
				font-weight: bold;
			}
			h4 {
				color: white;
				font-weight: bold;
			}
		}
	}
}
.username {
	margin-top: 6.667vw;
	margin-bottom: 6.667vw;
	// align-items: center;
}
.password {
	margin-bottom: 6.667vw;
}
.forgetpwd {
	text-align: right;
	margin-bottom: 10.667vw;
	font-weight: bold;
	color: white;
	padding-right: 5.333vw;
	a {
		color: white;
		font-weight: bold;
	}
}
.register {
	font-weight: bold;
	color: white;
	text-align: center;
	margin-top: 9.667vw;
	a {
		font-weight: bold;
		color: blue;
	}
}
.submitBtn {
	font-size: 4.8vw;
	font-weight: bold;
}
</style>
